<template>
  <div class="examineDocument">
    <el-table :data="authenticationTableData" border style="width: 100%">
      <el-table-column prop="id" label="用户ID" width="90">
        <template slot-scope="scope">
            <span @click='userDetails(scope.row)' class="link-type">{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="实名认证姓名"></el-table-column>
      <el-table-column prop="name" label="持卡人姓名"></el-table-column>
      <el-table-column prop="bankAddress" label="开户行"></el-table-column>
      <el-table-column prop="number" label="用户卡号"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span>{{getstatus(scope.row)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click='userCheck(scope.row,true)' type="text" size="mini">通过</el-button>
          <el-button @click='userCheck(scope.row,false)' type="text" size="mini">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <p>请输入拒绝原因</p>
      <el-input class="edit" v-model="checkParams.failedReason" placeholder="请输入内容"></el-input>
      <div class="btnGroup">
        <el-button>取消</el-button>
        <el-button @click="sureForword" type="primary">确认</el-button>
      </div>
    </el-dialog>
    <el-pagination
      class='pagination'
      background
      @current-change="handleCurrentChange"
      layout="prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
</template>


<script>
import { ajax } from "@/api";
import { parseTime } from "@/utils";
import { getToken } from "@/utils/auth";
export default {
  name: "bankCard",
  data() {
    return {
      total:0,
      value: "",
      dialogVisible:false,
      authenticationTableData: [],
      params:{
        auth:2,
        start:0,
        limit:10,
        token:getToken()
      },
      checkParams:{
        bankId:'',
        success:'',
        failedReason:'',
        token:getToken()
      }
    };
  },
  methods:{
    userDetails(data){
        this.$router.push({name:'userDetails',params:{id:data.id}});
    },
    userCheck(data,boolean){
      this.checkParams.bankId = data.id;
      if(boolean){
          this.checkParams.success = true;
          this.getAjax();
      }else{  
          this.dialogVisible = true;
          this.checkParams.success = false;
      }
    },
    sureForword(){
      if(this.checkParams.failedReason === ''){
        return this.$message.error('拒绝原因不能为空');
      }
      this.getAjax();
    },
    handleClose(done){
      done();
    },
    getAjax(){ // 银行卡审核
      ajax('userBankCheck',this.checkParams).then((res) => {
          if(res.data.status){
            this.$message.success('保存成功');
            this.checkParams = {
              bankId:'',
              success:'',
              failedReason:'',
              token:getToken()
            };
            this.getList();
            this.dialogVisible = false;
            
          }
      }); 
    },
    //银行卡列表
    getList(){
      ajax('userBankListForManager',this.params).then((res) => {
          if(res.data.status){
            this.total = res.data.total;
            this.authenticationTableData = res.data.data;
          }
      });
    },
    getstatus(data){
      return data.authStatus.text;
    },
      handleCurrentChange(val){
          console.log(val);
      }
  },
  mounted(){
    this.getList();
  }
};
</script>


<style lang="less" scoped>
.examineDocument {
    padding:1rem;
  .imgBox {
    width: 266px;
    height: 171px;
    margin: 4rem auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .select{
      margin:1rem 0;
  }

  .pagination{
      margin: 1rem 0;
      text-align: right;
  }
  .btnGroup {
    text-align: right;
    margin-top: 2rem;
  }
}
</style>
